<template>
	<div class="app">
	<div class="loginbackground">
	</div>
	<div class="loginpanel">
		<div class="logintitle">
			<span style="color:white;">欢迎登录活动项目组织机构子平台</span>
		</div>
		<div class="loginsubtitle">
			<span style="color:white;">友情提示：请先与活动项目组织机构获取子平台登录代码！</span>
			<span v-bind:style="{color:titleColor}">{{ showLoginTitle }}</span>
		</div>
<el-form :model="ruleForm" ref="ruleForm" label-width="160px" class="demo-ruleForm"  >
  <el-form-item label="组织机构子平台代码">
    <el-input v-model="ruleForm.orgid" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="登陆账号">
    <el-input v-model="ruleForm.acc" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="登陆密码">
    <el-input v-model="ruleForm.pwd" type="password" ></el-input>
  </el-form-item>
  <el-form-item label="短信验证码">
  	<el-row :gutter="6" type="flex">
  		<el-col :span="20">
    <el-input v-model.number="ruleForm.vcode"></el-input>
  		</el-col>
  		<el-col :span="4">
  	<el-link type="info" style="font-size:9pt;color:white">获取验证码</el-link>
  		</el-col>
  	</el-row>
  </el-form-item>
  <el-form-item>
  	<el-row :gutter="20">
  		<el-col :span="12">
    <el-button type="primary" @click="submitForm('ruleForm')">确定登陆</el-button>
  		</el-col>
  		<el-col :span="6">
    <el-button type="success" @click="goReg('ruleForm')">新用户注册</el-button>
  		</el-col>
  		<el-col :span="6">
    <el-link type="warning" @click="resetForm('ruleForm')" style="font-size:11pt;color:white">忘记密码</el-link>
  		</el-col>
  	</el-row>
  </el-form-item>
</el-form>
	</div>
	</div>
</template>

<style>
	.loginbackground{
		background: url(../../public/images/bg_1617779627000.jpg) 100%  no-repeat;
		background-size: 100% 100%;
		height: 100%;
		width: 100%;
		margin:0px auto;
		position: absolute;
		left: 0px;
		top: 0px;;
		z-index: -1;
	}
	.el-form-item__label{
		color:white;
	}
	.loginpanel{
		z-index: 9999;
		width:56%;
		margin:100px auto;
		border:solid 1px black;
		background: rgba(66,66,99,0.3);
		padding: 10px;
		
	}
	.logintitle{
		font-size:16pt;
		margin:12px;
	}
	.loginsubtitle{
		font-size:9pt;
		margin-bottom:6px;
		text-indent: 30px;
		color:darkslategray;
	}
</style>
<script>
	import poster from '@/js/post'
  export default {
    data() {
      return {
        ruleForm: {
          orgid: '',
          acc: '',
          pwd: '',
          vcode:''
        },
        loadding:false,
      };
      
    },
    methods: {
      login(){
    	let {orgid,acc,pwd,vcode}=this.ruleForm;
    	this.postLogin(acc,pwd);
    	if(orgid=="4331"&&acc=="admin"&&pwd=="admin"&&vcode=="6666"){
      		this.loginOk();
    		return true;
    	}
    		return false;
      },
      loginOk(){
      	this.$store.commit('loginSuccess')
      	this.$router.replace('index')
      },
      submitForm(formName) {
      	let ret=this.login();
      	if(!ret){
      		 this.$message.error('登陆失败');
      	}
      },
      resetForm(formName) {
      	this.$store.commit('loginOut')
        this.$refs[formName].resetFields();
      },
      goReg(formName) {
      	this.$router.push('/')
      },
      postLogin(acc,pwd){
      	poster.post("http://yunluo.com:8089/account/login",{
      		acc,pwd
      	}).then(res=>{
      		console.log("res=",res)
      	}).catch(err=>{
      		console.log("err=",err)
      	})
      }
    },
    computed:{
    	showLoginTitle(){
    		return this.$store.getters.isLogin?"已登录":"未登录";
    	},
    	titleColor(){
    		return this.$store.getters.isLogin?"green":"red";
    	}
    }
  }
</script>